<template>
    <div>
        <Tables 
           :title ='title' 
           :field = "type=='5'?field:field1" 
           :butns ="butns" :tableData ='tableData' 
           :animateShow = "animate_show"
           :perNum='per_num' 
           :totalNum="total_num"  
           :curPage ="cur_page" 
           :pageSize='pageSize' 
           :rankable ="true"
            @rankData = "rankData"
            @changePageSize = 'changePageSize'
           @loadData ="getData"  
           @clearEvent="clearModal">
		   <div slot="filter">
				<search :searchFiled="searchFiled" :selectItem="selectItem" @searchEvent = "searchData"></search>
				<div style="margin: 10px 0 0 20px;">
					<button :class="[type=='5'?'btn-active':'btn-unactive']" class="button button--aylen"  @click="changeType('5')">IP动态变换</button>
					<button :class="[type=='7'?'btn-active':'btn-unactive']" class="button button--aylen" @click="changeType('7')">主机上下线</button>
				</div>            
			</div>
		</Tables>
        <!--清除所有日志-->
		<Modals 
            :id ="'clear'" 
            :title ="'提示'" 
            :status = "status" 
            :errorMsg="errorMsg" 
            @sentErrorMsg = "getErrorMsg"
            @modalEvent ="clearAll">
            <div slot ="modal_content">
                <p style="font-size:16px;">确定清除所有主机{{ type=='5'?'变换日志':'上下线日志'}}？</p>
            </div>
        </Modals>
    </div>
</template>
<script>
    import Tables from 'components/common/Tables'
    import Modals from 'components/common/Modals'
	import search from 'components/common/search'
    import detailTd from './slots/detailTd'
    import logManageService from 'services/logManageService' 
	import SystemService from 'services/systemService'
    import PageData from 'libs/PageData'
    let butns = [
        {
            type:'other',
            name:'清空',
            event:'clearEvent',
            icon:'/static/img/w_clear.png'
        }
    ]
    let field = [
        {
            type:'rank',
        },
        {
            type:'text',
            label:'物理线路',
            name:'groupid',          
        },
		{
            type:'text',
            label:'MAC地址',
            name:'mac',          
        },
		{
            type:'text',
            label:'备注',
            name:'description',  
            editable:true        
        },
		{
            type:'text',
            label:'真实IP',
            name:'rip',          
        },
		{
            type:'text',
            label:'外网IP',
            name:'wip',          
        },
		{
            type:'text',
            label:'上线时间',
            name:'online_time',          
        },
		
		{
			type:'detail',
			label:'详情'
		}       
    ]
	let field1 = [
        {
            type:'rank',
        },
        {
            type:'text',
            label:'物理线路',
            name:'groupid',          
        },
		{
            type:'text',
            label:'MAC地址',
            name:'mac',          
        },
		{
            type:'text',
            label:'备注',
            name:'description',
            editable:true          
        },
		{
            type:'text',
            label:'真实IP',
            name:'rip',          
        },
		{
            type:'text',
            label:'外网IP',
            name:'wip',          
        },
		{
            type:'text',
            label:'上线时间',
            name:'online_time',          
        },
		{
            type:'text',
            label:'下线时间',
            name:'offline_time',          
        },  
    ]
	let searchFiled =[
		 {
            type:'select',
            label:'线路',
            name:'groupid',
            regex: /^\S$/,
        },
		 {
            type:'macinput',
            label:'MAC地址',
            name:'mac',
            regex: /^([0-9A-Fa-f]{2}:){1,6}$/,
        },
        {
            type:'time-rang',
            label:'时间范围',
            name:['start_time','end_time'],
        }

	]
    export default {
		components:{
		    Tables,
            Modals,
			search,
            detailTd
	    },
        data() {
            return{
                title:'主机日志',
                field:field,
				field1:field1,
                butns:butns,
                tableData:[],
                        
                type:'5',
				searchFiled:searchFiled,
				animate_show:false,
				selectItem:[],
				finddata:{},
                errorMsg:'',
                status:"",

                pageSize:[10, 20, 40, 80],
                per_num:25,
                total_num:1,
                cur_page:1,    

                order:'',
                by:'',
                size:10,
                params:{},
                
              
            }
        },
        created() {
            this.getLine()
            this.getData()
			
        },
        methods:{
            getErrorMsg(msg) {
                this.errorMsg = msg
            },
            clearModal() {
				$("#clear").modal('show')
			},
            clearAll() {
				this.status = 'ing'
				logManageService.clearTerminalLog(this.type)
				.then((res) => {
					
					if (res.errcode === 0) {
						this.status = 'ok'
						this.getData()
					} else {
						this.status = 'error'
						this.errorMsg = res.errorMessage
					}
				})
            },
            getLine() {
				SystemService.getLine()
				.then((res) => {	
					if (res.errcode === 0) {
						this.selectItem = res.group_id.map((item)=>{
							return "线路"+item
						})
					}
				})
			},
            changePageSize (nowpage, size) {
                this.cur_page = nowpage
                this.size = size
                this.getData()
            }, 
            rankData(param){
                this.order = param.order
                this.by =  param.by
                this.getData()
            },
            searchData(searchData){
                this.animate_show = true
                this.params = searchData
                this.params.groupid= this.params.groupid?this.params.groupid.replace(/[^0-9]/ig,""):0
				this.getData()
            },
            changeType(type){
                this.type = type
                this.order = ''
                this.by=''
                this.cur_page = 1
                this.params= {}
                this.getData()
            },
            getData(){
               logManageService.getTerminalLog(this.order,this.by,this.cur_page,this.size,this.type,this.params)
                .then((res)=>{
                    this.animate_show = false
                    if (res.errcode === 0) {
                        this.tableData = res[this.type].logs.map((item)=>{
							item.groupid = item.groupid==0?'外部主机':"线路"+item.groupid
							return item
						})
                        this.total_num = res[this.type].count 
                    
                    }
                })
            },
        }
    }
</script>
<style scoped>
	.button {
		height: 20px;
		margin-right: 10px;
	}
</style>